<template>
  <!-- 每个模版页必须有一个根节点标签 -->
  <div>
    <!-- 这里就是组件页面显示的内容 -->
    <el-button @click="toPay" class="pay_btn" type="success"
      >等待支付({{ count }}s)</el-button
    >
    <el-button id="hiddenbtn" class="hidden" v-trigger>隐藏</el-button>
    <welcomeAudioTip
      :audiourl="welcomeAudioTipurl"
      ref="child"
    ></welcomeAudioTip>
  </div>
</template>
<script>
import welcomeAudioTip from "@/components/welcomeAudioTip.vue";
export default {
  name: "payment", //定义组件的名称
  components: {
    welcomeAudioTip,
  },
  directives: {
    //自动触发交互
    trigger: {
      inserted(el, binging) {
        el.click();
      },
    },
  },
  data() {
    //定义组件内的属性,组件内属性调用方式使用生命周期关键字this 如：this.age
    return {
      welcomeAudioTipurl: require("@/assets/media/paytip.mp3"), //初始化欢迎提示音
      count: 10, //设置定时器倒计时60秒支付
    };
  },
  created() {
    //组件初始化时创建默认属性
  },
  mounted() {
    //同样也是组件初始化时使用，mounted方法会在页面完全加载后进行DOM相关的操作，如果使用created，有时初始化效果会失效，一般建议初始化使用mounted
    this.paymentAudioTip();
    this.timer()
  },
  methods: {
    paymentAudioTip() {
      //点击下单结算，更换子组件音频地址并重新播放
      this.welcomeAudioTipurl = require("@/assets/media/paytip.mp3");
      //调用子组件方法
      this.$refs.child.play();
    },
    paySuccessAudioTip(){
      this.welcomeAudioTipurl = require("@/assets/media/pay_success.mp3");
      //调用子组件方法
      this.$refs.child.play();
    },
    payFail(){

    },
    timer() {
      const TIME_COUNT = this.count;
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },
    //定义组件内事件的方法，如果无则不需要填写
    toPay() {
      //定义一个事件和方法
      this.paySuccessAudioTip();
      this.$message({
        type: "success",
        message: "您点击的是支付按钮!",
      });
    },
  },
};
</script>
<style scoped>
/* 独立组件的样式，写这里，支持标准的css语法 */
.hidden {
  display: none;
}
.pay_btn {
  margin-top: 10%;
  width: 600px;
  height: 350px;
  font-size: 80px;
}
</style>